<template>
  <div class="gzTake" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="gzForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" class="input_large">
          <el-input placeholder="产品图号" v-model="queryForm.produceCode"></el-input>
        </el-form-item>
        <el-form-item label="" class="input_large">
          <el-input placeholder="姓名" v-model="queryForm.takeUser"></el-input>
        </el-form-item>
        <el-form-item label="" class="input_large">
          <el-input placeholder="工装编号" v-model="queryForm.gzCode"></el-input>
        </el-form-item>
        <el-form-item label="" class="type_take search_select">
          <el-select clearable v-model="queryForm.type" filterable placeholder="请选择">
            <el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.startTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="margin-left: -25px;">至</el-col>
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.endTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search" @click="getGzTakeList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-top: 5px !important"></wh-table>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  export default {
    name: 'manage',
    data() {
      return {
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
        queryForm: {
          type: "",
          produceCode: "",
          startTime: "",
          endTime: "",
          gzCode: "",
          takeUser: ""
        },
        typeList: [{
          label: "出库",
          value: "1"
        }, {
          label: "入库",
          value: "0"
        }],
      }
    },
    components: {
      whTable
    },
    filters: {
      filterText(val) {
        if(val && val.length > 8) {
          return val.substring(0, 7) + "..."
        }
        return val;
      }
    },
    mounted() {
      let self = this;
      self.getGzTakeList();
      self.$eventBus.$on("updateGzTake", function(type) {
        for(let key in self.queryForm) {
          self.queryForm[key] = "";
        }
        self.getGzTakeList();
      })
    },
    methods: {
      handleDefaultTab() {
        let self = this;
        self.tableHeader =  [{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型","width":75},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "kuWeiCode", "coloumNameCn": "库位码"},
          {"columnName": "producer", "coloumNameCn": "制作厂家"},
          {"columnName": "createTime", "coloumNameCn": "日期"},
          {"columnName": "type", "coloumNameCn": "状态","tag":true,"width":85},
          {"columnName": "takeUser", "coloumNameCn": "操作人"}];
      },
      getGzTakeList() {
        let self = this;
        self.tableLoading = true;
        if(self.queryForm.endTime) {
          let endTime = formatDate(new Date(self.queryForm.endTime), "yyyy-MM-dd");
          self.queryForm.endTime = endTime + " 23:59:59";
        }
        self.$http({
          url: "/autoMonitor/gzTake/queryGzList",
          method: "post",
          params: self.queryForm
        }).then(resp => {
          if(resp.success) {
            self.handleDefaultTab();
            for(let data of resp.result) {
              data.kuWeiCode = data.kuWeiCode ? data.kuWeiCode.substring(2, 4) : data.kuWeiCode;
              data.createTime = formatDate(new Date(data.createTime), "yyyy-MM-dd hh:mm:ss");
            }
            self.tableData = resp.result;
            self.tableLoading = false;
          }
        });
      }
    }
  }
</script>
<style>
  .type_take .el-input--suffix .el-input__inner {
    padding-right: 6px;
  }
  .gzTake .el-form--inline .gzTake .el-form-item {
    margin-right: 3px;
  }
  .gzTake .el-select__tags {
    max-width: none !important;
  }
  .gzTake .el-date-editor.el-input,
  .gzTake .el-date-editor.el-input__inner {
    width: auto;
  }
  .gzTake .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .gzForm .el-form-item {
    margin-bottom: 10px !important;
  }
  .gzTake .el-button--medium {
    padding: 5px 9px !important;
  }
  .add .el-button--medium {
    padding: 15px 30px !important;
  }
  .gzTake .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .gzTake .input_large .el-input__inner {
    padding: 0 10px !important;
  }
  .gzTake .search {
    background: #34bfc6;
    border-color: #34bfc6;
  }
</style>